<template>
  <div class="AnnualReport">
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar title="年度报告">
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
        </van-nav-bar>
      </div>
      <!-- 下拉框 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="selectYearVal" :options="yearVal" @click="selectYaer()" />
      </van-dropdown-menu>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 标题 -->
      <div class="reportTitle">
        <div class="reportTitle-text">{{ selectYearVal }}年</div>
        <div class="reportTitle-tag">这一段时间共记账34笔</div>
      </div>
      <!-- 信息 -->
      <div class="reportInfo">
        <div class="reportInfo-box">
          <div class="reportInfo-t">
            <div class="reportInfo-item panel">
              共消费 <b>{{ 33 }}</b> 笔 共计 <b>{{ 878.85 }}</b> 元
            </div>
            <div class="reportInfo-item panel">
              共赚取 <b>{{ 1 }}</b> 笔 共计 <b>{{ 10.00 }}</b> 元
            </div>
            <div class="reportInfo-item panel">
              <div class="item-t">在谷子上消费最多，一共消费 {{ 7 }} 笔！</div>
              <div class="item-b">
                <div class="item-icon">
                  <van-image :src="img01" width="40"></van-image>
                </div>
                <div class="item-text">
                  <div class="text-t">
                    <div class="item-name">谷子</div>
                    <div class="item-per">{{ 49.7 }}%</div>
                  </div>
                  <div class="text-b">
                    <div class="progress-bar">
                      <div class="progress-bar-achieve" :style="{ 'width': spAchieve + '%' }"></div>
                    </div>
                  </div>
                </div>
                <div class="item-num">
                  <div class="num-t">￥{{ 436.75 }}</div>
                  <div class="num-b">{{ 7 }}笔</div>
                </div>
              </div>
            </div>
          </div>
          <div class="reportInfo-b">
            <div class="reportInfo-item panel">
              {{ 2 }}月花最多，共花 <b>{{ 673.80 }}</b>元
            </div>
            <div class="reportInfo-item panel">
              {{ 1 }}月赚最多，共赚：<b>{{ '10.00' }}</b>元
            </div>
            <div class="reportInfo-item panel">
              结余 <br><b>{{ '-868.85' }}</b> 元
            </div>
            <div class="reportInfo-item panel conclusion">
              <b>{{ '入不敷出' }}😭</b>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="main-b">
      <!-- 用户信息 -->
      <div class="panel-l">
        <div class="username">Hi 看到我请叫我滚去学习</div>
        <div class="userTag">今天是你记账的第605天啦😎</div>
      </div>
      <div class="panel-r">
        <div class="avater">
          <img :src="avaterImg01">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="AnnualReport">
// 年度报告
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router'
import img01 from '@/icon/077_游戏_子分类.svg';
import avaterImg01 from '@/image/avater_01.jpg'


const router = useRouter()
// 返回上一页
function back() {
  router.go(-1)
}

const selectYearVal = ref(2025);
let yearVal:any = []
// 计算年份 2000-至今
calYear()
function calYear() {
  for (let i = new Date().getFullYear(); i >= 2000; i--) {
    yearVal.push({
      text: i+'年',
      value: i
    })
  }
}

// 选择年份
function selectYaer() {
  console.log(selectYearVal.value)
}

// 设置消费最多分类的百分比
let spTotal = ref(878.85) // 总金额
let spEd = ref(436.75) // 已存金额
let spAchieve = computed({ // 已完成进度 / 进度条宽度
  get() {
    return (spEd.value / spTotal.value) * 100
  },
  set() { }
})

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelPadding : 40px; // 全局padding
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);
@grayBgColor: rgb(240, 240, 240);
@proFontColor: rgba(155, 189, 107, 0.841);

.AnnualReport {
  height: 100vh;
  font-size: 35px;
  // padding: @gabelMargin;
  background: white !important;


  .banner {
    background: @gabelBgColor;
  }

  .van-dropdown-menu__bar {
    background: @gabelBgColor;
  }
}

b {
  color: @proFontColor;
  font-size: 45px;
}

.main-c {
  background: rgb(219, 228, 207);
  padding: @gabelPadding;
  color: rgb(74, 74, 74);

  .reportTitle {
    color: @proFontColor;
    margin-bottom: 20px;
    font-size: 55px;
  }

  .reportTitle-tag {
    font-size: 40px;
  }

  .panel {
    background: rgb(236, 241, 233);
  }
}

.reportInfo {
  .item-b {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    margin-top: 20px;

    .item-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      background: white;
      border-radius: 30px;
    }

    .item-text {
      width: 60%;

      .text-t {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .item-name {
          color: black;
          font-weight: 600;
          margin-right: 10px;
          margin-top: -5px;
        }
      }
    }

    .item-num {
      text-align: right;

      .num-t {
        color: red;
        font-weight: 600;
      }
    }
  }

  .reportInfo-b {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;

    .reportInfo-item {
      width: 40%;
    }

    .panel {
      height: 100px;
    }

    .conclusion {
      display: flex;
      align-items: center;
    }
  }
}

.main-b {
  padding: @gabelPadding;
  background: white;
  color: @proFontColor;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .username {
    font-weight: 600;
    font-size: 45px;
  }

  .panel-r {
    width: 18%;

    .avater {
      margin-right: 10px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
      }
    }
  }
}

// 百分比条
.progress-bar {
  width: 81%;
  height: 15px;
  border-radius: 10px;
  background-color: rgb(241, 241, 241);
  overflow: hidden;

  .progress-bar-achieve {
    height: 100%;
    width: 0%;
    background-color: @gabelBgColor;
  }
}
</style>